.nav-bar-com {
  padding: 18px 0;
  position: fixed;
  width: 100%;
  z-index: $level1;
  transition: 0.32s ease-in-out;

  .container {
    @include vC;
    max-width: 1200px;
    justify-content: space-between;
    margin: 0 auto;
    padding: 0 48px;

    .logo {
      font-weight: 800;
      font-size: 36px;
    }

    .choose-box {
      .intro {
        font-weight: 400;
        color: #fff;
        letter-spacing: 0.8px;
        padding: 0 25px;
        font-size: 18px;
        opacity: 0.75;
        cursor: pointer;
      }
      .intro:hover {
        opacity: 1;
      }

      .gitee,
      .github {
        width: 42px;
        height: 42px;
        background: rgba(255, 255, 255, 0.5);
        display: inline-flex;
        border-radius: 50%;
        margin-right: 6px;
        align-items: center;
        justify-content: center;
        line-height: 1;
        border: 1px solid #ccc;
        margin-left: 12px;
        p {
          color: #333;
          font-size: 24px;
          font-weight: 800;
          z-index: $level4;
          transition: 0.3s ease-in-out;
        }
      }
      .gitee::before,
      .github::before {
        content: "";
        width: 42px;
        height: 42px;
        position: absolute;
        border-radius: 50%;
        transform: scale(0);
        transition: 0.3s ease-in-out;
      }
      .gitee:hover::before {
        background-color: #c71d23;
        transform: scale(1);
      }
      .gitee:hover {
        p {
          color: #fff;
        }
      }
      .github:hover::before {
        background-color: #fff;
        transform: scale(1);
      }
      .github:hover {
        p {
          color: #2e244a;
        }
      }

      .connect {
        position: relative;
        font-weight: 700;
        color: #fff;
        border: 1px solid #fff;
        padding: 18px 34px;
        font-size: 18px;
        background-color: transparent;
        transition: 0.3s ease-in-out;
        margin-left: 18px;
        cursor: pointer;
      }

      .connect::before {
        content: "";
        width: 0%;
        height: 100%;
        position: absolute;
        background-color: #fff;
        left: 0;
        top: 0;
        z-index: -1;
        transition: 0.3s ease-in-out;
      }
      .connect:hover {
        color: #000;
      }
      .connect:hover::before {
        width: 100%;
      }
    }
  }
}

@media screen and (max-width: 431px) {
  .nav-bar-com {
    padding: 28px 0;

    .container {
      padding: 0 32px;
    }
    .intro {
      padding: 0 10px !important;
    }
  }
}
@media screen and (max-width: 570px) {
  .nav-bar-com {
    .gitee,
    .github {
      display: none !important;
    }
  }
}
@media screen and (max-width: 821px) {
  .nav-bar-com {
    .connect {
      display: none !important;
    }
  }
}
@media screen and (max-width: 860px) {
  .nav-bar-com {
    .container {
      justify-content: flex-end;

      .logo {
        display: none;
      }
    }
  }
}
@media screen and (min-width: 752px) {
  .choose-box {
    @include vC;
  }
}
